<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="input">
		
	</body>	
	
	<script>
		let input=document.getElementById('input');
		
		// 函数防抖
		// 如果后面跟的是  ajax请求的话 会 输入一次 请求一次  造成极大的浪费  所以 要用 函数防抖来解决
		//上一个字符的输入  到现在的字符的输入小于 设定的秒数 先不请求接口  大于设定的秒数 再请求 (在这里设置的秒数为500ms)
		// let timer = null;
		// input.oninput=function(e){
		// 	clearTimeout(timer);//把已经存在的 计时器 给清掉
		// 	timer = setTimeout(v=>{
		// 		console.log(e.target.value);
		// 		// apply 用来改变this指向的
		// 	},500)//重新计时
		// }
		
		
		
		
		
		// 把这个 防抖动的方法 封装一下 因为有一个变量 在外面 所以要使用闭包的方式封装
		// 闭包：把一个变量 塞 到内部 外部拿不到 返回一个函数
		function debounce(fn,t=500){
			let timer = null;
			return function(...arg){
				clearTimeout(timer);//把已经存在的 计时器 给清掉
				timer = setTimeout(v=>{
					fn.apply(this,arg)
					// apply 用来改变this指向的
				},t)//重新计时
			}
		}
		// 当要执行时  要的是debounce的执行结果
		// debounce(第一个参 最后要干的事儿,第二个参数 是一个时间)
		input.oninput=debounce(function(e){
			console.log(e.target.value);
		},500)
		
		
		
		
	</script>
</html>